<template>
    <div>
        <div v-if="data.singleImg.using && !data.singleImg.src">
            <dont-choose-media/>
        </div>
        <div v-else-if="data.carousel.using && !data.carousel.src[0]">
            <dont-choose-media/>
        </div>
        <div v-else-if="data.video.using && !data.video.src">
            <dont-choose-media/>
        </div>
        <div v-else class="wraper">
            <div class="header-image"></div>
            <div class="header">
                <div class="lfoat">
                    <img class="user-picture" :src="data.userInfo.headImg" alt="img">
                    <div class="user-name">
                        <span>{{data.userInfo.name}}</span>
                        <span class="user-tips">赞助内容</span>
                    </div>
                </div>
                <div class="rfloat">
                    <i class="ul-img"></i>
                </div>
            </div>
            <div class="body">
                <!--单图片-->
                <div v-if="data.singleImg.using" class="single-img">
                    <img :src="data.singleImg.src" alt="img">
                </div>
                <!--轮播图-->
                <div v-else-if="data.carousel.using" class="carousel">
                    <el-carousel @change="imgChange" :interval="2000" indicator-position="outside" :autoplay="true" arrow="never">
                        <el-carousel-item v-for="(item,index) in data.carousel.src" :key="index">
                            <img class="carousel-img" :src="item">
                        </el-carousel-item>
                    </el-carousel>
                </div>
                <!--视频-->
                <div v-else-if="data.video.using" class="video">
                    <video :src="data.video.src" autoplay loop id="previewVideo"></video>
                </div>
            </div>
            <div v-if="data.singleImg.using && data.showLink">
                <div @click="" class="see-detail">
                    <span class="see-detail-title">{{actionCall =='无按钮'?'详细了解':actionCall}}</span>
                    <span class="el-icon-arrow-right see-detail-arow"></span>
                </div>
            </div>
            <div v-if="!data.singleImg.using && actionCall">
                <div @click="" class="see-detail">
                    <span class="see-detail-title">{{actionCall =='无按钮'?'详细了解':actionCall}}</span>
                    <span v-if="data.carousel.using" class="see-detail-arow">
                    <i v-for="(list,i) in data.carousel.src" :key="i" :class="i==imgIndex?'doit-active':'doit-default'" class="doit"></i>
                </span>
                    <span v-else-if="data.video.using" class="el-icon-arrow-right see-detail-arow"></span>
                </div>
            </div>

            <div class="footer">
                <div class="clear-lf">
                    <div style="float:left">
                        <div>
                            <i @click="islike=!islike" :class="islike?'img-sp-1-like':'img-sp-1'" class="img-bg img-margin"></i>
                            <i class="img-sp-3 img-bg img-margin"></i>
                            <i class="img-sp-4 img-bg"></i>
                        </div>
                    </div>
                    <div style="float:right">
                        <div>
                            <i @click="istag=!istag" :class="istag?'img-sp-5-tag':'img-sp-5'" class="img-bg"></i>
                        </div>
                    </div>
                </div>
                <div class="top-line"></div>
                <div class="footer-content">
                    <span class="footer-title">{{adverTitle ||"标题"}}</span>
                    <span>{{adverText ||"广告文字"}}</span><span v-show="text.length>70" style="color:#999">更多</span>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import Vue from 'vue'
    import { Carousel,CarouselItem } from 'element-ui'
    import { mapGetters, mapMutations ,mapActions} from 'vuex';
    import DontChooseMedia from '~components/ad-preview/dont-choose-media.vue'

    Vue.use(Carousel)
    Vue.use(CarouselItem)

    export default {
        components: {
            DontChooseMedia
        },
        props: {
            'data': {
                default: {}
            }
        },
        data (){
            return {
                islike: false,
                istag: false,
                seeMore : false,
                text :'',
                title:'',
                imgIndex:0
            }
        },
        computed: {
            ...mapGetters([
                'adCreate'
            ]),
            actionCall:function(){
                let text = "";
                if(this.data.singleImg.using){
                    text = this.data.singleImg.actionCall;
                }else if(this.data.carousel.using){
                    text = this.data.carousel.imageInfo[0].actionCall;
                    //text = this.data.carousel.imageInfo[this.imgIndex].actionCall;
                }else if(this.data.video.using){
                    text = this.data.video.actionCall;
                }
                return text || "详细了解";
            },
            adverText: function () {
                this.text = this.data.adText
                if (this.text.length > 70) {
                  this.seeMore = true;
                  return this.text.substring(0, 70)
                }else{
                    return this.text || ""
                }
            },
            adverTitle: function () {
                if(this.data.singleImg.using){
                    this.title = this.data.singleImg.title;
                }else if(this.data.carousel.using){
                    this.title = this.data.carousel.imageInfo[0].title;
                    //this.title = this.data.carousel.imageInfo[this.imgIndex].title;
                }else if(this.data.video.using){
                    this.title = this.data.video.title;
                }
                return this.title || "";
            }
        },
        methods: {
            openUrl(){
                let url = this.adCreate.detailLink;
                let item = url.split('://');
                if(item[0] !== 'http' && item[0] !== 'https'){
                    url = 'http://' + url;
                }
                window.open(url)
            },
            imgChange(index){
                this.imgIndex = index
            }
        },
        created () {

        }
    }
</script>

<style lang="scss" scoped>
    *{
        box-sizing: border-box;
    }
    .wraper{
        overflow: hidden;
        position: relative;
        width: 320px;
        margin: 10px auto;
        border: 1px solid rgba(0,0,0,.3);
        background-color: #fff;
        word-wrap: break-word;
        color: #191919;
        font-family: Helvetica, Arial, Lucida Grande, sans-serif;
        font-size: 13px;
        line-height: 1.358;
    }
    .header-image{
        width: 320px;
        height: 40px;
        background-position: 0 0;
        background-image: url('~assets/img/ad-preview-instagram.png');
        background-size: auto;
        background-repeat: no-repeat;
        display: inline-block;
    }
    .header{
        font-family: HelveticaNeue-Medium, Helvetica Neue Medium, HelveticaNeue, Helvetica Neue, Helvetica, sans-serif;
        padding-left: 10px;
        position: relative;
        top: 2px;
        zoom: 1;
        margin-bottom: 5px;
    }
    .header:after{
        content:".";
        display:block;
        height:0;
        clear:both;
        visibility:hidden;
    }
    .lfoat{
        float: left;
    }
    .rfloat{
        float: right;
        margin-right: 10px;
        margin-top: 2px;
        font-weight: 500;
        white-space: nowrap;
        color: #262626;
        font-size: 12px;
        line-height: 24px;
        
    }
    .ul-img{
        width: 12px;
        height: 12px;
        background-position: -132px -41px;
        background-image: url('~assets/img/ad-preview-instagram.png');
        background-size: auto;
        background-repeat: no-repeat;
        display: inline-block;
        margin-bottom: 2px;
        margin-left: 4px;
        vertical-align: middle;
    }
    .user-picture{
        border-radius: 33px;
        display: inline;
        height: 26px;
        margin-top: 1px;
        width: 26px;
        border: 0;
    }
    .user-name{
        left: 44px;
        position: absolute;
        top: -4px;
        color: #1d2129;
        font-weight: 500;
        white-space: nowrap;
        font-size: 12px;
        line-height: 24px;
    }
    .user-tips{
        color: #262626;
        display: block;
        font-family: HelveticaNeue, Helvetica Neue, Helvetica, sans-serif;
        font-size: 11px;
        position: relative;
        top: -12px;
    }
    .img-bg{
        background-image: url('~assets/img/ad-preview-instagram.png');
        background-size: auto;
        background-repeat: no-repeat;
        display: inline-block;
        height: 18px;
        width: 21px;
    }
    .img-margin{
        display: inline-block;
        float: left;
        margin: 1px 15px 0 1px;
    }

    .img-sp-1{
        background-position: 0 -41px;
        display: inline-block;
    }
    .img-sp-1-like{
        background-position: -22px -41px;
        display: inline-block;
    }
    .img-sp-3{
        width: 20px;
        background-position: -44px -41px;
    }
    .img-sp-4{
        width: 19px;
        background-position: -65px -40px;
    }
    .img-sp-5{
        width: 18px;
        background-position: -85px -41px;
        margin: 1px 10px 0 1px;
    }
    .img-sp-5-tag{
        width: 18px;
        background-position: -104px -41px;
        margin: 1px 10px 0 1px;
    }
    
    .footer{
        color: #90949c;
        margin-top: 12px;
        position: relative;
    }
    .clear-lf{
        height: 20px;
        margin: 0 10px 0 10px;
    }
    .top-line{
        margin-top: 8px;
        color: #90949c;
        line-height: 20px;
    }
    .footer-content{
        border-top: 1px solid #e5e5e5;
        margin: 0 12px;
        padding: 4px 0;
        height:70px;
        span{
            color: #262626;
            font-family: HelveticaNeue, Helvetica Neue, Helvetica, sans-serif;
            font-size: 12px;
            letter-spacing: .5px;
            line-height: 13px;
        }
        .footer-title{
            display: inline-block;
            height: 13px;
            line-height: 13px;
            width: 100%;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
    }
    .single-img{
        overflow: hidden;
        margin-top: 10px;
        box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
        position: relative;
        height: 165px;
        width: 100%;
        overflow: hidden;
        img{
            position: relative;
            width: 100%;
            height: 165px;
            border: 0;
        }
    }
    .carousel{
        width: 100%;
        height: 300px;
        overflow: hidden;
        img{
            position: relative;
            height: 300px;
            width: 100%;
            border: 0;
        }
    }
    .video{
        margin: auto;
        max-height: 100%;
        max-width: 100%;
        overflow: hidden;
        z-index: 0;
        video{
            height: 178px;
            width: 318px;
            transition: 350ms filter ease-in-out, 350ms -webkit-filter ease-in-out;
        }
        .icon-pause{
            display: none;
        }
        &:hover .icon-pause.show{
            display: inline-block;
         }

    }
    .see-detail{
        height: 38px;
        line-height: 38px;
        width: 298px;
        margin: 0 10px;
        border-bottom: 1px solid #e6e6e6;
        color: #3397f0;
        font-size: 13px;
        cursor: pointer;
        .see-detail-title{
            display: inline-block;
            width: 200px;
            height: 38px;
            line-height: 38px;
        }
        .see-detail-arow{
            display: inline-block;
            width: 90px;
            text-align: right;
            line-height: 38px;
        }
        .doit{
            display: inline-block;
            width: 4px;
            height: 4px;
            margin:5px;
            border-radius:2px;
        }
        .doit-default{background-color:#c7c7c7;}
        .doit-active{background-color:rgb(51, 151, 240);}

     }

    
</style>
